<template>
    <div class="view-container">

        <header-module left-custom padding>
            <template #left-con>
                <div>
                    客户跟进
                    <span style="margin-left: 10px">{{datas.customerNo}}</span>
                </div>
            </template>

            <template #btn>
                <el-button class="main-btn" size="small" @click="onBack">返回</el-button>
                <template v-if="userInfo.ID == datas.headId">
                    <el-button lass="main-btn" size="small" type="primary" @click="onCancel">取消跟进</el-button>

                    <template v-if="datas.saleTaskId > 0">
                        <el-dropdown @command="handleCommand" v-if="datas.taskType == 1 || datas.taskType == 2">
                            <el-button lass="main-btn" size="small" type="primary" style="margin-left: 10px">新建要素</el-button>

                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item command="1">区域要素</el-dropdown-item>
                                    <el-dropdown-item command="2">精细要素</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>

                        <el-button lass="main-btn" size="small" type="primary" v-if="datas.taskType == 3" @click="createAgreement(3)">新建终端直销要素</el-button>
                        <el-button lass="main-btn" size="small" type="primary" v-if="datas.taskType == 4" @click="createAgreement(4)">新建商业营销要素</el-button>
                    </template>
                    <template v-else>
                        <el-dropdown @command="handleCommand" v-if="datas.customerType == 1">
                            <el-button lass="main-btn" size="small" type="primary" style="margin-left: 10px">新建要素</el-button>

                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item command="1">区域要素</el-dropdown-item>
                                    <el-dropdown-item command="2">精细要素</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>

                        <el-button lass="main-btn" size="small" type="primary" v-if="datas.customerType == 2" @click="createAgreement(4)">新建商业营销要素</el-button>
                        <el-button lass="main-btn" size="small" type="primary" v-if="datas.customerType == 3" @click="createAgreement(3)">新建终端直销要素</el-button>
                    </template>
                </template>

            </template>

        </header-module>

        <div class="info-container">

            <el-form :inline="true" class="filter-form-inline" label-position="right" label-width="110px" size="small">
                <el-row style="margin-left: 0px;margin-right:0px;">
                    <el-col :span="16">
                        <el-form-item label="产品信息：" style="width: 100%;">
                            {{getProductName(datas)}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="关联营销任务：" style="width: 100%;">

                            <el-link
                                    :underline="false"
                                    style="display: flex;align-items: center;justify-content: left"
                                    type="primary"
                                    @click="onPlan"
                            >
                                {{datas.taskNo}}
                            </el-link>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item :label="datas.customerType == 1 ? '代理商编号：' : datas.customerType == 2 ? '商销客户编号：' : '终端编号：'" style="width: 100%;">
                            {{datas.objectNo}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item :label="datas.customerType == 1 ? '代理商名称：' : datas.customerType == 2 ? '商销客户名称：' : '终端名称：'" style="width: 100%;">
                            {{datas.objectName}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item :label="datas.customerType == 1 ? '代理商地址：' : datas.customerType == 2 ? '商销客户地址：' : '终端地址：'" style="width: 100%;">
                            {{datas.provinceName}}{{datas.cityName}}{{datas.areaName}}{{datas.address}}
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="合作意向：" style="width: 100%;">

                            <template v-if="!isEdit">
                                <div v-if="userInfo.ID != datas.headId">{{getLabel("corporation",datas.corporation)}}</div>

                                <div v-else class="change-item" @click="corporationChange">
                                    <span>{{getLabel("corporation",datas.corporation)}}</span>

                                    <el-icon><edit /></el-icon>
                                </div>
                            </template>

                            <template v-else>
                                <div class="change-select">
                                    <el-select
                                            v-model="corporation"
                                            style="width: 100%"
                                            placeholder="请选择合作意向">
                                        <el-option
                                                v-for="item in corporations"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value"
                                        >
                                        </el-option>
                                    </el-select>

                                    <el-icon @click="corporationConfirm"><check /></el-icon>

                                    <el-icon @click="corporationCancel"><close-bold /></el-icon>
                                </div>

                            </template>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="负责跟进职员：" style="width: 100%;">

                            <div style="display: flex;align-items: center">
                                <span>{{datas.headName}}</span>

                                <el-button type="text" @click="onChangeHead" style="margin: 0 10px" v-if="userInfo.ID == datas.headId">更换</el-button>
                            </div>

                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="开发跟进时间：" style="width: 100%;">
                            <span v-if="datas.followUpTime">{{dateFormat('yyyy-mm-dd',datas.followUpTime)}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="最后跟进时间：" style="width: 100%;">
                            <span v-if="datas.lastTime">{{dateFormat('yyyy-mm-dd HH:MM',datas.lastTime)}}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

        </div>

        <div class="main-content">

            <el-tabs v-model="activeName" @tab-click="handleClick" class="elTabs">
                <el-tab-pane label="跟进记录" name="1">
                    <followRecord mode="client" :datas="datas"/>
                </el-tab-pane>
                <el-tab-pane label="联系人" name="3">
                    <contactView :datas="datas"/>
                </el-tab-pane>
                <el-tab-pane label="修改记录" name="2">
                    <operation-view mode="register_customer_follow_up"/>
                </el-tab-pane>
            </el-tabs>

        </div>

        <changeHeadDialog ref="changeHead" :id="datas.id" :datas='datas' @success="getData"/>

        <detail-drawer
                ref="comDrawer"
                :size-width="1000"
                custom-title
        >
            <template #title>

                <span>营销任务</span>

            </template>
            <template #contents>

                <taskConfirmView :id="datas.saleTaskId"/>

            </template>
        </detail-drawer>

        <addAgreementDialog ref="addAgreement"/>

        <directSellingFrom ref="directSelling"/>

        <newForm ref="newForm" :task-data="datas" typeEdit="create"/>

    </div>
</template>

<script>
    import {crmStore} from "../../../../../store";
    import { Edit, Check, CloseBold} from '@element-plus/icons'
    import { useRouter, useRoute } from 'vue-router'
    import { defineComponent, defineAsyncComponent, reactive, toRefs, inject, getCurrentInstance, onMounted } from 'vue'
    export default defineComponent({
        name: "index",
        components:{
            followRecord:defineAsyncComponent(
                ()=>import('../../modules/followRecord.vue')
            ),
            Edit, Check, CloseBold,
            taskConfirmView:defineAsyncComponent(
                ()=>import('../../../../commonView/detailComponents/task/taskConfirmView.vue')
            ),
            addAgreementDialog:defineAsyncComponent(
                ()=>import('../../../modules/addAgreementDialog.vue')
            ),
            contactView:defineAsyncComponent(
                ()=>import('../../modules/contactView.vue')
            ),
            changeHeadDialog:defineAsyncComponent(
                ()=>import('../../modules/changeHeadDialog.vue')
            ),
            directSellingFrom:defineAsyncComponent(
                ()=>import('../../../modules/directSellingFrom.vue')
            ),
            newForm:defineAsyncComponent(
                () => import('../../../cooperation/businessAgreement/modules/newForm.vue')
            )
        },
        setup(){
            const api = inject('api')
            const currentInstance = getCurrentInstance()
            const route = useRoute()
            const router = useRouter()
            const userInfo = crmStore.getters['user/userInfo']
            const corporations = crmStore.getters['dictionary/getDictionary']['corporation']

            var data = reactive({
                activeName:'1',
                changeHead:null,
                datas:{},
                corporation:'',
                isEdit:false,
                comDrawer:null,
                addAgreement:null,
                directSelling:null,
                newForm:null,
            })

            const getData = () => {
                api.task.TASK_CUSTOMER_DETAIL(route.query.id).then(res => {
                    if (!res.code){
                        data.datas = res.data
                    }else{
                        currentInstance.proxy.customMessage({type:'error',message:res.msg})
                    }
                })
            }

            const corporationChange = () => {
                data.corporation = data.datas.corporation
                data.isEdit = true
            }

            const corporationConfirm = () => {
                currentInstance.proxy
                    .alertBox({
                        message: '你确定更改此客户合作意向？',
                        title: '更改合作意向',
                    })
                    .then(() => {
                        api.task.TASK_CUSTOMER_UPDATE_CORPORATION({registerCustomerId:data.datas.id,corporation:data.corporation}).then(res=>{
                            if (!res.code){
                                currentInstance.proxy.customMessage({type:'success',message:'更改成功'})
                                data.isEdit = false
                                getData()
                            }else{
                                currentInstance.proxy.customMessage({type:'error',message:res.msg})
                            }
                        })
                    })
                    .catch((err) => {
                        console.log(err)
                    })

            }

            const onCancel = () => {
                let str = ''
                if (data.datas.customerType == 1){
                    str = '你确定取消跟进此客户？'
                }else if (data.datas.customerType == 2){
                    str = '你确定取消跟进此客户？'
                }else if (data.datas.customerType == 3){
                    str = '你确定取消跟进此终端吗？'
                }
                currentInstance.proxy
                    .alertBox({
                        message: str,
                        title: '取消跟进',
                    })
                    .then(() => {
                        api.task.TASK_CUSTOMER_CANCEL_FOLLOW_UP(data.datas.id).then(res=>{
                            if (!res.code){
                                currentInstance.proxy.customMessage({type:'success',message:'取消成功'})
                                onBack()
                            }else{
                                currentInstance.proxy.customMessage({type:'error',message:res.msg})
                            }
                        })
                    })
                    .catch((err) => {
                        console.log(err)
                    })
            }

            const corporationCancel = () => {
                data.isEdit = false
            }

            const handleClick = () => {

            }

            const onChangeHead = () => {
                data.changeHead.open()
            }

            const onBack = () => {
                router.back()
            }

            const handleCommand = (command) => {
                console.log(command)
                createAgreement(command)
            }

            const onPlan = () => {
                data.comDrawer.open()
            }

            const createAgreement = (type) => {
                console.log(type)
                if (type == 1){
                    data.addAgreement.open(1,data.datas)
                }else if (type == 3){
                    data.directSelling.open(data.datas)
                }else if (type == 2) {
                    router.push({name: 'fineAgreementAdd',query:{taskId:data.datas.id}})
                }else if (type == 4){
                    data.newForm.open('新建商业营销要素')
                }
            }

            onMounted(()=>{
                getData()
            })

            return{
                ...toRefs(data),
                corporations,
                userInfo,

                onBack,
                handleClick,
                handleCommand,
                onChangeHead,
                corporationChange,
                corporationConfirm,
                corporationCancel,
                onCancel,
                getData,
                onPlan,
                createAgreement
            }
        }
    })
</script>

<style lang="scss" scoped>
    @import "@/style/basics.scss";
    .change-item{
        color: $main-color;
        display: flex;
        align-items: center;
        .el-icon{
            margin-left: 20px;
        }
    }
    .change-select{
        display: flex;
        align-items: center;
        .el-icon{
            color: $main-color;
            margin-left: 20px;
        }
    }
</style>
